<template>
	<div class="vedio">
		<div class="nav-head"><router-link to="/layout/musLib"><img src="../../../assets/icon-return45.png"></router-link><div class="title">视频</div></div>
		<div class="top-blank"></div>
		<div class="top-img"><img src="../../../assets/11750.350.png"></div>
		<div class="nav-list">
			<div class="new" @click="ToNewVedio">
				<p><img src="../../../assets/NEW@2x.png"></p>
				<div>最新视频</div>
			</div>
			<div class="hot" @click="ToHotVedio">
				<p><img src="../../../assets/zuire.png"></p>
				<div>最热视频</div>
			</div>
			<div class="boader" @click="ToVedioBoader">
				<p><img src="../../../assets/bangdang.png"></p>
				<div>视频榜单</div>
			</div>
			<div class="live" @click="ToSingerLive">
				<p><img src="../../../assets/zhibo.png"></p>
				<div>歌手直播</div>
			</div>
		</div>
		<div class="recent-mv">
			<h2>最近<img src="../../../assets/icon-next32.png"></h2>
			<div class="recent-list">
				<div><img src="../../../assets/vedio-pic1.png"><p>下雨了-薛之谦</p></div>
				<div class="mr0"><img src="../../../assets/vedio-pic2.png"><p>下雨了-薛之谦</p></div>
				<div><img src="../../../assets/vedio-pic2.png"><p>下雨了-薛之谦</p></div>
				<div class="mr0"><img src="../../../assets/vedio-pic1.png"><p>下雨了-薛之谦</p></div>
				<div><img src="../../../assets/vedio-pic2.png"><p>下雨了-薛之谦</p></div>
				<div class="mr0"><img src="../../../assets/vedio-pic1.png"><p>下雨了-薛之谦</p></div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import	musicPlayer from '../../../components/music_player'
	export default{
		name:"vedio",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ToNewVedio(){
				this.$router.push('/newVed')
			},
			ToHotVedio(){
				this.$router.push('/hotVed')
			},
			ToVedioBoader(){
				this.$router.push('/vedBoa')
			},
			ToSingerLive(){
				this.$router.push('/sinLiv')
			}
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.top-img{
	width: 100%;
	height: 350 / 100rem;
	overflow: hidden;
	// margin-top: 88 / 100rem;
	img{
		width: 100%;
	}
}
.nav-list{
	width: 100%;
	height: 175 / 100rem;
	background-color: #fff;
	margin-bottom: 20 / 100rem;
	font-size: 30 / 100rem;
	div{
		float: left;
		margin-top: 33 / 100rem;
	}
	.new{
		width: 168 / 100rem;
		p{	
			margin-left: 44 / 100rem;
			img{
				width: 78 / 100rem;
			}
		}
		div{
			margin-top: 29 / 100rem;
			margin-left: 20 / 100rem;
		}
	}
	.hot{
		width: 207 / 100rem;
		p{	
			margin-left: 70 / 100rem;
			img{
				width: 78 / 100rem;
			}
		}
		div{
			margin-top: 29 / 100rem;
			margin-left: 46 / 100rem;
		}
	}
	.boader{
		width: 207 / 100rem;
		p{	
			margin-left: 70 / 100rem;
			img{
				width: 78 / 100rem;
			}
		}
		div{
			margin-top: 29 / 100rem;
			margin-left: 46 / 100rem;
		}
	}
	.live{
		width: 168 / 100rem;
		p{	
			margin-left: 44 / 100rem;
			img{
				width: 72 / 100rem;
			}
		}
		div{
			margin-top: 29 / 100rem;
			margin-left: 20 / 100rem;
		}
	}
}
.recent-mv{
	background-color: #fff;
	overflow: hidden;
	position: relative;
	// margin-bottom: 108 / 100rem;
	h2{
		font-size: 30 / 100rem;
		margin:32 / 100rem  0  28 / 100rem   20 / 100rem;
		img{
			width: 19 / 100rem;
			position: absolute;
			top:29 / 100rem;
			right: 20 / 100rem;
		}
	}
	.recent-list{
		width: 100%;
		div{
			float: left;
			width: 370 / 100rem;
			margin-right: 10 / 100rem;
			margin-bottom: 25 / 100rem;
			img{
				width: 100%;
			}
			p{
				margin-top: 10 / 100rem;
				margin-left: 10 / 100rem;
			}
		}
		.mr0{
			margin-right: 0;
		}
	}
}
</style>